<template>
  <div>
    <div class="container">
      <!-- 头部 -->
      <div class="content">
        <div style="height: 100px"></div>
        <div class="headerlist">
          <!-- 搜索 -->
          <div class="nav">
            <!-- 网易严选图片 -->
            <a href="javascript:;">网易严选</a>
            <!-- 公共搜索组件 -->
            <VSearch @click="toSearch" />
            <!-- 登录 -->

            <van-button type="danger" size="mini" hairline plain @click="$router.push('/login')">登录</van-button>
          </div>

          <!-- 推荐 -->
          <van-tabs swipeable @click-tab="getTag">
            <van-tab :name="item.id" :title="item.name" v-for="(item, index) in channelList" :key="index"> </van-tab>
          </van-tabs>
        </div>
      </div>

      <VRecommend v-if="isShowIndex === 2" :phoneList="phoneList" />
      <VOther v-if="isShowIndex === 1" :channelItem="channelItem" />
      <!--  -->
    </div>
  </div>
</template>

<script lang="ts" setup>
import router from '@/router'

import VRecommend from '@/components/Recommend/index.vue'
import VOther from '@/components/Other/index.vue'
import { onMounted, ref } from 'vue'
import { CategoryL1List } from '@/types/pdao'
import { reqOtherList, reqRecommList } from '@/api/home'
import { reqPhoneDetail } from '@/api/goodsDetail'
import { GoodsList } from '@/types/phonedetail'

const isShowIndex = ref(2)
// 存储单个频道数据
const channelItem = ref()

// 存储手机数据
const phoneList = ref<GoodsList[]>([])

//频道列表
const channelList = ref<CategoryL1List[]>([])

// 跳转到搜索页面
const toSearch = () => {
  router.push('/search')
}
// 获取频道列表
const getChannelList = async () => {
  const res = await reqRecommList()
  // console.log(res)
  const { categoryL1List } = res.data
  channelList.value = categoryL1List
}

// 点击导航时候切换
const getTag = async (e: any) => {
  // console.log(e)
  // 判断点击的导航
  if (e.title === '为你推荐') {
    isShowIndex.value = 2
  } else {
    isShowIndex.value = 1
  }

  //拿到id，发送请求
  const categoryId = e.name

  const res = await reqOtherList(categoryId)
  channelItem.value = res.data
}

onMounted(() => {
  // 获取频道列表
  getChannelList()
  getCate()
})
// 声明参数
const params = {
  category1Id: 2,
  categoryName: '手机',
  category2Id: '', // 二级分类id(可选参数)
  category3Id: '', // 三级分类id(可选参数)

  keyword: '', // 关键词(可选参数)
  props: [], // 商品属性(可选参数)
  trademark: '', // 品牌(可选参数)
  order: '1:desc', // 排序(可选参数)
  pageNo: 1, // 当前页码（必选项！！！！）
  pageSize: 10 // 每页展示多少条（必选项！！！！）
}

const getCate = async () => {
  const res = await reqPhoneDetail(params)
  // console.log(res)
  if (res.code === 200) {
    phoneList.value = res.data.goodsList
  }
}
</script>

<script lang="ts">
export default {
  name: 'VHome'
}
</script>

<style lang="scss" scoped>
.container {
  padding-left: 5px;
  padding-right: 5px;
}
.nav {
  margin-left: 20px;
  height: 50px;
  line-height: 10px;
  // display: flex;
  // background-color: azure;
  a {
    font-size: 16px;
    color: black;
    font-weight: bold;
  }
}
.headerlist {
  background-color: #fff;
  width: 100%;
  position: fixed;
  z-index: 999;
  top: 0;
}

.van-search {
  width: 240px;
  display: inline-block;
  height: 100%;
}
.van-tabs {
  width: 375.2px;
}
</style>
